<!-- 交通方式管理 -->
<template>
  <div class="traffic_manager">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <el-button @click="addTraffic" type="primary">新增交通方式</el-button>
      </div>
      <DataCollectTable :data="trafficData" :config="config" @operationsHander="opHander.receive">
      </DataCollectTable>
    </el-main>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="35%" top="35vh" class="base_dialog">
      <el-form ref="trafficFormRef" :model="trafficForm" :rules="trafficRules" label-width="120px">
        <el-form-item label="交通方式名称" prop="name">
          <el-input v-model="trafficForm.name" />
        </el-form-item>
        <el-form-item label="范围" prop="scope">
          <el-checkbox-group v-model="trafficForm.scope">
            <el-checkbox label="去程" />
            <el-checkbox label="返程" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(trafficFormRef)">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { $msg, $box } from "@ui/msg";
import DataCollectTable from '@com/table/DataCollectTable.vue'
import { OP_KEY, OPERATIONS, operationsHander } from "@com/table/tableOperations";
import { ref, reactive } from 'vue'
import trafficData from "@/test/trafficData.json"

// const trafficData = reactive()

function goodsOperations(data) {
  return [OPERATIONS.modify, OPERATIONS.del]
}

const config = {
  showIndex: true,
  operations: {
    label: '操作',
    width: 120,
    operations: goodsOperations
  },
  column: [
    {
      label: '交通方式名称',
      prop: 'name',
    }, {
      label: '范围',
      prop: 'scope',
    }
  ]
}

function addTraffic() {
  dialogTitle.value = '新增'
  dialogVisible.value = true
}

const opHander = operationsHander()
opHander.install(OP_KEY.modify, (data) => {
  dialogTitle.value = '修改'
  trafficForm.name = data.name
  trafficForm.scope = data.scope
  dialogVisible.value = true
})
opHander.install(OP_KEY.delete, (data) => {
  $box.open("删除确认", `是否删除${data.name}`, () => {
    $msg.succ("删除成功");
  });
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const trafficFormRef = ref('')
const trafficForm = reactive({
  name: '',
  scope: []
})
const trafficRules = {
  name: [{
    required: true,
    message: '请输入交通方式名称',
    trigger: 'blur',
  }],
  scope: [{
    required: true,
    type: 'array',
    message: '请选择范围',
    trigger: 'change',
  }],
}
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(trafficForm)
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss">
.traffic_manager {
  .el-header {
    display: flex;
    align-items: center;
  }
}
</style>